<template>
  <view class="squareBox" :style="style">
    <view class="squareBoxInner">
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
	// 等比盒子
	import {computed} from 'vue'
	const props = defineProps({
		ratio: {
			type: Number,
			default: 1
		}
	})
	const style = computed(() => {
		const ratio = props.ratio;
		return `padding-bottom: ${100 / ratio}%;`;
	})
</script>
<style lang="less" scoped>
.squareBox {
  position: relative;
  .squareBoxInner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>